﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminPage.Master" AutoEventWireup="true" CodeBehind="EditPublication.aspx.cs" Inherits="Electure.Admin.EditPublication" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            var fileTable = $('#fileList'),
                files = JSON.parse($('#hfVideoFiles').val()),
                fileIds = Object.getOwnPropertyNames(files);;

            var pushFile = function (id, name) {
                $('#fileList tr:last')
                    .after('<tr><td align="right">'
                        + name
                        + '</td><td><span class="glyphicon glyphicon-remove" style="cursor: pointer" id="removeFile-'
                        + id + '"></span></td></tr>'
                     );
                var tempFiles = JSON.parse($('#hfVideoFiles').val());
                tempFiles[id] = name;
                $('#hfVideoFiles').val(JSON.stringify(tempFiles));
                if (Object.getOwnPropertyNames(tempFiles).length > 0)
                    fileTable.show();
            };
            fileIds.forEach(function (item) {
                pushFile(item, files[item]);
            });
            if (fileIds.length == 0)
                fileTable.hide();

            $('[id^=removeFile-]').click(function () {
                $(this).parent().parent().hide();
                var id = $(this).attr('id').split('-')[1],
                    tempFiles = JSON.parse($('#hfVideoFiles').val());
                delete tempFiles[id];
                $('#hfVideoFiles').val(JSON.stringify(tempFiles));
                if (Object.getOwnPropertyNames(tempFiles).length == 0)
                    fileTable.hide();
            });

            $('#fileupload').fileupload({
                url: '<%= ResolveClientUrl("~/Admin/Handlers/UploadFile.ashx")%>',
                dataType: 'json',
                autoUpload: true,
                acceptFileTypes: /(\.|\/)(mp4)$/i,
                success: function (data, status) {
                    var id = Object.getOwnPropertyNames(data);
                    pushFile(id, data[id]);
                },
                progress: function (e, data) {
                    $('.progress-bar-success').css('width', parseInt(data.loaded / data.total * 100, 10).toString() + '%');   
                }
            });
            $('#fileupload').bind('fileuploadstart', function (e) {
                $('.progress-bar-success').attr('style', "width:0%;");
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="form-group">
        <label for="tbName">Назва</label>
        <asp:TextBox ID="tbName" ClientIDMode="Static" CssClass="form-control" runat="server"></asp:TextBox>
    </div>
    <div class="form-group">
        <label for="tbDescription">Опис</label><br />
        <asp:TextBox ID="tbDescription" ClientIDMode="Static" CssClass="form-control" Columns="50" Rows="10" TextMode="MultiLine" runat="server"></asp:TextBox>
    </div>
    <div class="form-group">
        <label for="ddlCategories">Категорія</label><br />
        <asp:DropDownList  ID="ddlCategories" ClientIDMode="Static" CssClass="selectpicker" runat="server"></asp:DropDownList>
    </div>
    <div class="form-group">
        <label for="ddlScienceDepartments">Навчально-науковий підрозділ</label><br />
        <asp:DropDownList ID="ddlScienceDepartments" ClientIDMode="Static" CssClass="selectpicker" runat="server"></asp:DropDownList>
    </div>
    <asp:Image ID="imagePreview" style="max-width: 500px" runat="server" /><br /><br />
    <div class="form-group">
        <label for="fuImage">Зображення</label>
        <asp:FileUpload ID="fuImage" ClientIDMode="Static" runat="server" /><br /><br />
    </div>
    <table id="fileList" style="width: 300px" class="table">
        <tr>
            <th style="width: 250px" >Назва</th>
            <th></th>
        </tr>
    </table>
    <asp:HiddenField ID="hfVideoFiles" ClientIDMode="Static" runat="server" />
    <div id="fileupload">
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="col-lg-7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Додати відео</span>
                    <input type="file" name="files[]" multiple />
                </span>
                <span class="fileupload-process"></span>
            </div>
            <!-- The global progress state -->
            <div class="col-lg-5 fileupload-progress">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
    </div>
    <asp:Button ID="btSave" CssClass="btn" role="button" OnCommand ="button_Command" CommandName="Save" runat="server" Text="Зберегти" />
    <asp:Button ID="btCancel" CssClass="btn" role="button" OnCommand="button_Command" CommandName="Cancel" runat="server" Text="Відміна" />
</asp:Content>
